<template>
	<div id="coupon-container" class="coupon-container">
    <section class="getcoupon">
      <p>您可以使用{{point_name}}兑换优惠券</p>
      <van-button  class="send-btn" v-if="is_coupon_send==1" @click="clickSendCoupon"  color="linear-gradient(to right, #F82337, #FF2D59)" round >转赠</van-button>
      <!-- TODO 路径修改 -->
      <van-button  class="exchange-btn" @click="Jump('exchange-coupon')" color="#F30C23" plain hairline round type="primary">去兑换</van-button>
    </section>
    <!-- 导航栏-->
    <section class="coupons-nav">
      <section v-for="(item,index) in couponsNav" :key="index" :class="item.active==1?'cur':''" @click="clickCouponsNav(item,index)">{{item.name}}({{item.num}})</section>
      <!-- <section class="unused" :class="type==1?'cur':''">未使用({{unusedNum}})</section>
      <section class="used" data-page='1' :class="type==2?'cur':''">已使用({{usedNum}})</section>
      <section class="expired" data-page='1' :class="type==3?'cur':''">已过期({{expiredNum}})</section> -->
    </section>
    <div class="coupons-con-box">
      <unused ref="coupon1" v-show="type==1" :unusedCoupons="unusedCoupons"></unused>
      <used ref="coupon2" v-show="type==2" :usedCoupons="usedCoupons"></used>
      <expired ref="coupon3" v-show="type==3" :expiredCoupons="expiredCoupons"></expired>
    </div>
    <van-dialog
			v-model="showDonation"
			title="优惠券转赠"
			show-cancel-button
      confirm-button-text="确定"
			@confirm='confirmDonation'
			class="common-confirm"
			@close="hideDonation"
		>
			<div class="donation-box">
				<div class="input-box">
          <label for="">会员ID：</label><input type="number" name="friend_uid" id="J-get-info" v-model="friend_uid" @change="changeDonationUid"/>
          <span class="info">{{friend_nickname}}</span>
        </div>
        <div class="input-box">
          <label for="">转赠优惠券：</label>
          <div class="select-box">
            <div class="arrow"></div>
            <select class="couponid-select" name="user_coupon_id" value="-1" v-model="user_coupon_id" @change="selectCoupon">
              <option value="-1">选择优惠券</option>
              <option :value="item.user_coupon_id" v-for="(item,index) in transfer_coupon_data" :key="index">{{item.title}}</option>
              <!-- <foreach name="transfer_coupon_data" item="vo">
                <option value="{$vo.coupon_id}">{$vo.title}</option>
              </foreach> -->
            </select>
          </div>
        </div>
        <div class="check_transfer_records" @click="Jump('transferRecords')">点击查看转赠记录</div>
			</div>
		</van-dialog>
  </div>
</template>

<script>
import Vue from 'vue'
import { mapGetters } from 'vuex'
import { getMyCoupon, UserNickname, donationCoupon } from '@/api/user/member/memberApi'
import TopBack from '@/components/TopBack/index'
import unused from './unused/index'
import used from './used/index'
import expired from './expired/index'
import 'vant/lib/dialog/style'
export default Vue.extend({
  name: 'index',
  components: {
    TopBack,
    unused,
    used,
    expired
  },
  data() {
    return {
      type: 1,
      showDonation: false,
      showDonationConfirm: false,
      couponsNav: [
        {
          name: '未使用',
          num: '',
          active: 1
        },
        {
          name: '已使用',
          num: '',
          active: 0
        },
        {
          name: '已过期',
          num: '',
          active: 0
        }
      ],
      // unusedNum: '11',
      // usedNum: '12',
      // expiredNum: '13',
      topBackParams: {
        headerTitle: '我的优惠券',
        bgColor: '#ffffff',
        titleSize: '16px',
        backLink: ''
      },
      point_name: '积分',
      is_coupon_send: 1, // 是否允许转赠
      transfer_coupon_data: [],
      unusedCoupons: {
        ftitle_coupon_name: '优惠券',
        is_verify_coupon: '', // 是否允许核销
        coupons: []
      },
      usedCoupons: {
        ftitle_coupon_name: '优惠券',
        is_verify_coupon: '',
        coupons: []
      },
      expiredCoupons: {
        ftitle_coupon_name: '优惠券',
        is_verify_coupon: '',
        coupons: []
      },
      donationForm: {
        friend_uid: '',
        couponid: '-1'
      },
      friend_uid: '',
      couponid: '-1',
      user_coupon_id: '-1',
      friend_nickname: ''
    }
  },
  methods: {
    Jump(url) {
      this.$JumpPath(this, url)
    },
    init() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
      getMyCoupon().then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          const resData = res.data
          this.topBackParams.headerTitle = resData.ftitle_coupon
          // this.point_name=resData.point_name
          this.is_coupon_send = resData.is_coupon_send
          this.transfer_coupon_data = resData.transfer_coupon_data
          this.unusedCoupons.is_verify_coupon = this.usedCoupons.is_verify_coupon = this.expiredCoupons.is_verify_coupon = resData.is_verify_coupon
          this.couponsNav[0].num = resData.no_use_count
          this.couponsNav[1].num = resData.use_count
          this.couponsNav[2].num = resData.expired_count
          this.unusedCoupons.coupons = resData.no_use
          this.usedCoupons.coupons = resData.use
          this.expiredCoupons.coupons = resData.expired
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 转赠优惠券
    clickSendCoupon() {
      this.showDonation = true
    },
    // 关闭转赠弹窗清空弹窗数据
    closeDonation() {
      this.friend_uid = ''
      this.couponid = '-1'
      this.user_coupon_id = '-1'
      this.friend_nickname = ''
    },
    // 点击转赠优惠券弹窗关闭按钮
    hideDonation() {
      this.showDonation = false
      this.closeDonation()
    },
    // 转赠会员id输入改变时
    changeDonationUid() {
      const params = { id: this.friend_uid }
      UserNickname(params).then(res => {
        if (res.status == 1) {
          if (res.data.data) {
            this.friend_nickname = res.data.data
          }
        } else {
          // this.$Error(res.msg)
        }
      })
    },
    // 赠送优惠券发生改变时
    selectCoupon() {
      const coupons = this.transfer_coupon_data.filter(item => item.user_coupon_id == this.user_coupon_id)
      if (coupons.length > 0) {
        this.couponid = coupons[0].coupon_id
      }
    },
    // 点击确定转赠
    confirmDonation() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
      const params = {
        friend_uid: this.friend_uid,
        user_coupon_id: this.user_coupon_id,
        couponid: this.couponid
      }
      donationCoupon(params).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.$Error('转赠成功')
          this.showDonation = false
          this.closeDonation()
          this.init()
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 切换优惠券
    clickCouponsNav(item, index) {
      if (item.active == 0) {
        const couponsNav = this.couponsNav
        couponsNav.forEach((val, i) => {
          val.active = 0
          if (index == i) {
            val.active = 1
            this.type = i + 1
          }
        })
      }
    }
  },
  beforeCreate() {
    // $('body').addClass('bg_white')
    document.getElementsByTagName('body')[0].classList.add('bg_white')
  },
  destroyed() {
    // $('body').removeClass('bg_white')
    document.getElementsByTagName('body')[0].classList.remove('bg_white')
  },
  created() {
    this.init()
  },
  mounted() {
      // 小程序触底加载更多
      window.addEventListener('reachbottom', () => {
        if (this.type === 1) {
          this.$refs.coupon1.onLoad()
        } else if (this.type === 2) {
          this.$refs.coupon2.onLoad()
        } else if (this.type === 3) {
          this.$refs.coupon3.onLoad()
        }
      })
      // TODO 接收广播更新未使用优惠券列表
      window.$$subscribe('refreshCoupon', data => {
        this.init()
        if (this.type === 1) {
          this.$refs.coupon1.p = 2
          this.$refs.coupon1.finished = false
          this.$refs.coupon1.error = false
        } else if (this.type === 2) {
          this.$refs.coupon2.p = 2
          this.$refs.coupon2.finished = false
          this.$refs.coupon2.error = false
        } else if (this.type === 3) {
          this.$refs.coupon3.p = 2
          this.$refs.coupon3.finished = false
          this.$refs.coupon3.error = false
        }
      })

    
  },
  beforeDestroy() {
    window.$$unsubscribe('refreshCoupon')
  },
  computed: {
    ...mapGetters(['wxConfig'])
  },
  watch: {
    wxConfig(val) {
      if (val.user_index_link) {
        this.topBackParams.backLink = val.user_index_link
      }
    }
  }
})
</script>

<style lang="scss">
  @import "@/styles/mixin";
  @import '@/styles/user/coupons/index.scss';
  .coupon-container{
    .getcoupon{
      font-size: 26px;
      color: #F30C23;
      background: #FEF5F0;
      overflow: hidden;
      padding:14px 30px;
      p{
        float: left;
        line-height: 52px;
      }
      .send-btn,.exchange-btn{
        float: right;
        margin-left: 20px;
        height: 52px;
        padding: 0 30px;
        .van-button__text{
          font-size: 26px;
        }
      }
      .test{
        width:136px;
        height:52px;
        border:1px solid rgba(243,12,35,1);
        border-radius:26px;
        text-align: center;
        font-size: 26px;
        background: transparent;
      }
    }
    .coupons-nav {
      width: 100%;
      height: 90px;
      line-height: 90px;
      // border: 2px solid #f3f3f3;
      // border-width: 2px 0;
      background: #fff;
      font-weight: 500;
      -webkit-display:flex;
      display:flex;
      text-align:center;
      font-size:26px;
      color:#666666;
      &>section{
        flex-grow:1;
        &.cur{
          color: #333333;
          font-size: 28px;
          font-weight: bold;
          &::after{
            display: block;
            @include gradient(right,RGBA(242, 18, 40, 1),RGBA(242, 18, 40, .1));
            content: "";
            position: relative;
            width: 40%;
            height: 5px;
            bottom: 5px;
            left: 50%;
            margin-left: -20%;            
          }
        } 
      }
    }
    .coupons-con-box{
      ul{
        padding: 30px;
      }
      li{
        width: 690px;
        overflow:hidden;
      }
    }
    .donation-box{
      padding: 40px 0;
      .input-box{
        width: 100%;
        padding: 0 20px;
        overflow: hidden;
        &:nth-of-type(2) {
          margin-top: 25px;
        }
        label{
          width: 35%;
          display: block;
          float: left;
          font-weight:normal;
          text-align: right;
          font-size: 28px;
          line-height: 76px;
          color: #666666;
        }
        .select-box{
          position:relative;
          float: left;
          width: 41%;
          .arrow{
            position:absolute;
            top:32px;
            right:16px;
            width:16px;
            height:9px;
            background:url("https://img.wifenxiao.com/h5-wfx/images/down.png") no-repeat;
            background-size:100% 100%;
          }
          select,.couponid-select{
            width:100%;
            //小程序样式特殊处理
            padding-top:20px;
            line-height:36px;
          }
        }
        input,select{
          width: 41%;
          padding: 15px 20px;
          display: block;
          float: left;
          height: 76px;
          background: #fff;
          border-radius: 6px;
          border: 2px solid #EDEDED;
          font-size: 24px;
          color: #999999;
        }
        .info{
          display: block;
          float: right;
          font-size: 24px;
          color: #ff5000;
          width: 25%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .confirm{
        margin-top:26px;
        padding: 20px 0;
        width: 100%;
        font-size: 32px;
        line-height:1.3;
        color: #fff;
        text-align: center;
        background-color: #ff5000;
        a{
          color: #fff;
        }
      }
    }
  }
  .check_transfer_records {
    text-align: center;
    font-size: 24px;
    margin-top: 20px;
    text-decoration: underline;
    color: #F20B22;
  }
</style>